<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输角色名称" clearable @clear="search" v-model="rname" >
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addRoleFormVisible=true">添加角色</el-button>
        </el-col>
      </el-row>

      <el-table :data="roleList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="角色名称" prop="name"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success" size="mini"  @click="openRoleAuthorityForm(scope.row)">分配权限</el-button>
            <el-button type="warning" size="mini"  @click="editRoleDialog(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6, 12, 24]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

    </el-card>

    <!--添加菜单-->
    <el-dialog title="添加角色" :visible.sync="addRoleFormVisible" @close="closeAddRoleForm" :close-on-click-modal="false">
      <el-form ref="addRoleForm" :rules="addRoleRules" :model="addRole" label-width="150px" size="mini">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="addRole.name"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button  @click="closeAddRoleForm">取 消</el-button>
        <el-button type="primary" @click="addRoleForm">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑菜单-->
    <el-dialog title="修改角色" :visible.sync="editRoleFormVisible" @close="closeEditRoleForm" :close-on-click-modal="false">
      <el-form ref="editRoleForm" :rules="editRoleRules" :model="editRole" label-width="150px" size="mini">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="editRole.name"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button  @click="closeEditRoleForm">取 消</el-button>
        <el-button type="primary" @click="editRoleForm">确 定</el-button>
      </div>
    </el-dialog>


    <!--编辑菜单-->
    <el-dialog title="角色授权" :visible.sync="roleAuthorityFormVisible" @close="closeRoleAuthorityForm" :close-on-click-modal="false">
      <el-form ref="roleAuthorityForm" :rules="roleAuthorityRules" :model="roleAuthority" label-width="150px" size="mini">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleAuthority.name" disabled></el-input>
        </el-form-item>

        <el-form-item label="权限选择">
          <el-tree
              :data="permissionMenu"
              show-checkbox
              :props="defaultProps"
              default-expand-all
              node-key="id"
              ref="treeDemo"
              check-strictly
          ></el-tree>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="closeRoleAuthorityForm">取 消</el-button>
        <el-button type="primary" @click="saveRoleAuthorityForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Role",
  data(){
    return {
      roleAuthorityFormVisible:false,
      editRoleFormVisible:false,
      addRoleFormVisible:false,
      rname:'',
      roleList:[],
      pageNum:1,
      pageSize:3,
      total:0,
      addRole:{
        name:''
      },
      addRoleRules:{
        name:[
          {required:true,message:"名称不能为空",trigger:"blur"}
        ],
      },
      editRole:{
        id:0,
        name:'',
        insertTime:''
      },
      editRoleRules:{
        name:[
          {required:true,message:"名称不能为空",trigger:"blur"}
        ],
      },
      roleAuthorityRules:{

      },
      roleAuthority:{
        id:0,
        name:'',
        perIds:[]
      },
      permissionMenu:[],  //所有权限菜单
      defaultProps:{
        children: 'children',
        label: 'name'
      },
      authorityedPermission:[]  //本角色已经拥有的权限菜单
    }
  },
  methods:{
    //保存权限
    saveRoleAuthorityForm(){
      //获取所有选中的权限的id
      let pids = this.$refs.treeDemo.getCheckedKeys();
      console.log(pids) ;
      this.roleAuthority.perIds = pids ;

      this.$axios.put("role/roleAuthority",this.roleAuthority)
      .then((data)=>{
        if(data.data.code == 200){
          this.roleAuthorityFormVisible =false ;
          this.$message({
            type: 'success',
            message: '授权成功!' ,
            duration:1000
          });
        }else {
          this.$message({
            type: 'error',
            message: data.data.msg ,
            duration:1000
          });
        }
      })
    },
    //关闭授权狂
    closeRoleAuthorityForm(){
      this.roleAuthorityFormVisible =false ;
      this.authorityedPermission = [] ;
    },
    //打开角色授权狂
    openRoleAuthorityForm(obj){
      this.authorityedPermission = [] ;

      this.roleAuthorityFormVisible = true ;
      this.roleAuthority = obj ;
      //根据角色 id 查询出 所有拥有的权限
      this.$axios.get("urlPermission/getPermissionIdByRoleId/"+obj.id)
      .then((data)=>{
        if (data.data.code == 200){
          //this.authorityedPermission = data.data.data ;
          //设置默认选项
          this.$refs.treeDemo.setCheckedKeys(data.data.data)
        }else {
          this.$message({
            type: 'error',
            message: data.data.msg ,
            duration:1000
          });
        }
      })
    },
    //删除角色
    del(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete("role/del/"+id)
            .then((data)=>{
              if (data.data.code == 200){
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                  duration:1000
                });
                this.searchRole();
              }else {
                this.$message({
                  type: 'error',
                  message: data.data.msg ,
                  duration:1000
                });
              }
            });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //保存修改
    editRoleForm(){
      this.$refs.editRoleForm.validate((valid)=>{
        if (!valid) return ;

        this.$axios.put("role/modifyRole",this.editRole)
        .then((data)=>{
          if (data.data.code == 200){
            this.editRoleFormVisible = false ;
            this.searchRole();
            this.$message({
              type: 'success',
              message: data.data.msg,
              duration:1000
            });
          }else {
            this.$message({
              type: 'error',
              message: data.data.msg,
              duration:1000
            });
          }
        });
      })
    },
    //关闭修改的对话框
    closeEditRoleForm(){
      this.editRoleFormVisible = false ;
    },
    //打开编辑对话框
    editRoleDialog(obj){
      this.editRoleFormVisible = true ;
      this.editRole = obj ;
    },
    //关闭添加对话框
    closeAddRoleForm(){
      this.$refs.addRoleForm.resetFields();
      this.addRoleFormVisible = false ;
    },
    //保存角色
    addRoleForm(){
      this.$refs.addRoleForm.validate((valid)=>{
        if (!valid) return ;
        this.$axios.post("role/addRole",this.addRole)
        .then((data)=>{
          if (data.data.code == 200){
            this.$refs.addRoleForm.resetFields();
            this.addRoleFormVisible = false ;
            this.searchRole();
            this.$message({
              type: 'success',
              message: data.data.msg,
              duration:1000
            });
          }else {
            this.$message({
              type: 'error',
              message: data.data.msg,
              duration:1000
            });
          }
        })
      })
    },
    search(){
      this.pageNum = 1;
      this.searchRole();
    },
    handleSizeChange(size){
      this.pageNum = 1;
      this.pageSize = size ;
      this.searchRole();
    },
    handleCurrentChange(now){
      this.pageNum = now;
      this.searchRole();
    },
    searchRole(){
      this.$axios.get("role/roleList",{
        params:{
          now:this.pageNum,
          size:this.pageSize,
          rname:this.rname
        }
      }).then((data)=>{
        if (data.data.code == 200){
          this.roleList = data.data.data.records;
          this.pageNum = data.data.data.current;
          this.pageSize = data.data.data.size;
          this.total = data.data.data.total
        }else {
          this.$message({
            type: 'error',
            message: data.data.msg,
            duration:1000
          });
        }
      })
    },
    loadMenus() {
      this.$axios.get("urlPermission/getAllMenu")
          .then((data)=>{
            if(data.data.code == 200){
              this.permissionMenu = data.data.data ;
            }else {
              this.$message({
                message:data.data.msg,
                type:'error',
                duration:1000
              })
            }
          })
    }
  },
  created(){
    this.searchRole();
    this.loadMenus();
  }
}
</script>

<style scoped>

</style>